<!--
    group: 发票管理
    name: 开票列表
    item: 批量核验---发送邀请展示列表弹层
-->
<template>
  <a-modal
     wrapClassName="batchVerification-con"
     :width="1200"
     :title="title_"
     :visible="visible_"
     @cancel="handleCancel"
     :footer="null"
   >
   <!-- <a-alert message="当前开票数据已与其他开票请求合并核验，您可以：" type="warning" show-icon  /> -->
   <a-card title="我们将向下列用户发送核验邀请，请确认发送对象！" style="width: 100%;margin: 5px 0;" :headStyle="{padding:'3px 10px','font-size':'14px',display:'flex','font-weight':'600'}">
     <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false" :scroll="{y:300}">

      <template slot="entName" slot-scope="text">
         <divBox :dataArr="text"></divBox>
       </template>
       <template slot="amount" slot-scope="text">
         <divBox :dataArr="text" direction="left"></divBox>
       </template>

       <template slot="footer" slot-scope="currentPageData" >
         <div style="display: flex; justify-content: center; align-items: center; padding-right: 0px;">
           <a-button :loading="loading" type="primary" style="margin: 0 20px;" @click.prevent="SVIEvent"> 发送核验邀请 </a-button>
           <a-button type="link" style="margin: 0 20px;" @click.prevent="closed"> 修改核验对象 </a-button>
         </div>
       </template>
     </a-table>
   </a-card>

   </a-modal>
</template>

<script>
import { taxInvoiceCatalogCheck } from '@api/invoiceAdminister'
import UUID from '@/utils/uuid'
import * as Util from '@/utils/util'
// entName  购买方名称     taxTitle 开票企业  lisenceLegal  法人    legalPhone 法人实名手机号   amount 开票金额
const columns = [
 {
   title: '开票企业',
   align:'center',
    width:'300px',
   ellipsis:true,
   dataIndex: 'taxTitle',
   scopedSlots: { customRender: 'taxTitle' },
 },
 {
   title: '法人',
   align:'center',
   width:'200px',
   ellipsis:true,
   dataIndex: 'lisenceLegal',
   scopedSlots: { customRender: 'lisenceLegal' },
 },
 {
   title: '法人实名手机号',
   align:'center',
   width:'150px',
   dataIndex: 'legalPhone',
   scopedSlots: { customRender: 'legalPhone' },
 },
 {
   title: '购买方名称',
   align:'center',
   width:'300px',
   ellipsis:true,
   dataIndex: 'entName',
   scopedSlots: { customRender: 'entName' },
 },
 {
   title: '开票金额',
   align:'left',
   width:'150px',
   className: 'column-money',
   dataIndex: 'amount',
   scopedSlots: { customRender: 'amount' },
 },

]

const conv = (dataList)=>{
 const tempObj = {}
 const kkk = ''
 const className='red'
 const getVal = (key,val)=>{
   if(key==kkk){
     return {value:val,className}
   }
   return val
 }
// entName  购买方名称     taxTitle 开票企业  lisenceLegal  法人    legalPhone 法人实名手机号   amount 开票金额
 dataList.forEach(item=>{
   const {taxTitle,lisenceLegal,legalPhone,amount} = item
   const tempAmount = Util.conversionElement(amount)+' 元'
   const key = UUID('MDUUID',JSON.stringify(legalPhone))
   if(!tempObj[key]){
     tempObj[key] = {
      taxTitle,lisenceLegal,legalPhone,
      entName:[getVal(item.key,item.entName)],
      amount:[getVal(item.key,tempAmount)],
      keys:[getVal(item.key,item.key)]
     }
   }else{
     tempObj[key].entName.push(getVal(item.key,item.entName))
     tempObj[key].amount.push(getVal(item.key,tempAmount))
     tempObj[key].keys.push(getVal(item.key,item.key))
   }
 })
//  console.log(tempObj);
 const tempArr = []
 for (const key in tempObj) {
   if (Object.hasOwnProperty.call(tempObj, key)) {
     const element = tempObj[key];
     tempArr.push(element)
   }
 }
 return tempArr
}

const divBox = {
 props: {
   dataArr: { type: Array },
   direction:{type:String,default:'center'},
   className:{type:String,default:''},
   // setEvent: { type: Function },
 },
 data() {
   return {}
 },
 methods: {
   getItem(item,direction,className){
     const directionAction = {
       'left':'t-l',
       'center':'t-c',
       'right':'t-r',
     }
     if(this.isType.isObject(item)){
       return (<div class={`div-box-item ${directionAction[direction]} ${item.className}`}>
         {item.value}
       </div>)
     }
     return(<div class={`div-box-item ${directionAction[direction]} ${className}`}>
       {item}
     </div>)
   },
 },
 render: function (h) {
   const {dataArr,direction,className} = this

   return (<div class={'div-box-c'}>
     {dataArr.map(item=>(this.getItem(item,direction,className)))}
   </div>)
 },
}


export default {
 // import引入的组件需要注入到对象中才能使用
 name: 'batchVerification',
 components: {divBox},
 props: {
   rowData: {
     type: Array,
     required: true,
   },
   show:{type:Boolean,default:false},
   event:{type:Function}
 },
 data() {
   // 这里存放数据
   return {
     visible_:false,
     title_:'验证邀请',
     columns,
     dataSource:[],
     loading:false
   };
 },
 // 监听属性 类似于data概念
 computed: {},
 // 监控data中的数据变化
 watch: {
    rowData: {
     handler(val) {
       if(!this.isType.isNullOrUnDef(val)){
        this.dataSource = conv(val)
       }
     },
     deep: true,
     immediate: true
   },
   show: {
     handler(val) {
       if(!this.isType.isNullOrUnDef(val) && this.isType.isBoolean(val)){
         this.visible_ = val
       }
     },
     deep: true,
     immediate: true
   },
 },
 // 生命周期 - 创建完成（可以访问当前this实例）
 created() {},
 // 生命周期 - 挂载完成（可以访问DOM元素）
 mounted() {
  // this.dataSource = conv(data)
 },
 // 方法集合
 methods: {
   handleCancel(){
     this.visible_ = false
     this.event&& this.event('SVIclose',{visible:this.visible_,type:'close'})
   },
   closed(){
    this.visible_ = false
    this.event&& this.event('SVIclose',{visible:this.visible_,type:'edit'})
   },
   /**
    * 发送核验邀请
    */
   SVIEvent(){
    this.loading = true
    const idsArr = this.rowData.map(item=>{ return item.flowNo})
    const param = {ids:idsArr}
    taxInvoiceCatalogCheck(param).then((res) => {
      const {success,result,message} = res
      if(success==true){
        console.log(result);
      //   [
      //     {
      //         "invoiceId": null,
      //         "entId": null,
      //         "entName": "沙市区千城万店方略信息咨询服务中心",
      //         "legalName": "陈志新",
      //         "legalPhone": "13804984417",
      //         "signSMS": "尊敬的沙市区千城万店方略信息咨询服务中心，您有开票信息待确认，点击以下链接确认信息并完成验证。https://t.bestsign.cn/pg3Bz1fcuCF9o6",
      //         "signUrl": "https://t.bestsign.cn/pg3Bz1fcuCF9o6",
      //         "catalogName": "00b83e358e3e47469e964710f4c9c868",
      //         "receiptName": null,
      //         "amount": null
      //     }
      //  ]
        this.event&& this.event('SVI',result)
      }else{
        this.$message.warning(message)
      }
      this.loading = false
    })
   },
 },
 }
</script>
<style lang='less' >
.batchVerification-con{
 .ant-modal{
   .ant-modal-content{
     .ant-modal-header{
       .ant-modal-title{
         text-align:left;
       }
     }
   }
 }
 .ant-table-tbody > tr > td{
   padding:0;
 }
 .div-box-c{
   width: 100%;
   display: flex;
   justify-content:center;
   align-items: center;
   flex-direction: column;
   .div-box-item{
     width: 100%;
     height: 50px;
     display: flex;
     justify-content:center;
     align-items: center;
     border-bottom: 1px solid #e8e8e8;
     padding: 5px 8px;
     &.t-c{
       justify-content:center;
     }
     &.t-l{
       justify-content:flex-start;
     }
     &.t-r{
       justify-content:flex-end;
     }
     &.red{
       color: #fa0505;
       font-weight: bold;
     }
   }
   .div-box-item:last-child{
     border-bottom: 0px solid #e8e8e8;
   }
 }
}
</style>
